---
title: Primeri
description: Primeri pred in po uporabi Ultracite.
---

Za ponazoritev zmožnosti Ultracitea so tukaj nekaj praktičnih primerov težav, ki jih odkrije in odpravi. Vsak primer prikazuje kodo pred (s težavo) in po uporabi Ultracitea. Ti primeri prikazujejo, kako Ultracite samodejno izboljša kodo.

## Samodejno oblikovanje kode

### Pred (neurejeno oblikovanje)

```tsx title="page.tsx"
function greet(name) { return 'Hello, '+ name + "!!" }
```

V tej kodi so razmiki in slog združevanja nizov nepravilni. Prav tako uporablja združevanje nizov namesto predlogovnih nizov in vmešani so dvojni in enojni narekovaji.

### Po (oblikovano)

```tsx title="page.tsx"
function greet(name) {
  return `Hello, ${name}!!`;
}
```

Formatirnik Ultracitea je:

- Oblikoval funkcijo z ustreznimi prelomi vrstic za boljšo berljivost.
- Pretvoril združevanje nizov v predlogovni niz (to je lahko samodejen popravek, ki ga predlaga pravilo linterja za boljšo berljivost).
- Standardiziral narekovaje na backtick za predlogovni niz (in drugod dosledno uporabil dvojne narekovaje, če ne gre za predlogovni niz).
- Dodal podpičje na konec izjave `return`.
- Zagotovil pravilne presledke okoli zavitih oklepajev in okroglih oklepajev.

Razvijalec kode ni ročno preoblikoval – samo shranil je datoteko in Ultracite je poskrbel za preostalo. Rezultat je čistejša in bolj dosledna koda.

Ultracite vas bo tudi opozoril, da `name` nima tipa, in predlagal dodajanje tipa.

## Uveljavljanje stroge enakosti

### Pred (potencialna napaka pri popuščajoči enakosti)

```tsx title="validate.ts"
let isValid = false;
const response = getResponse();
if (response.status == 200) {
  isValid = true;
}
```

Tukaj koda uporablja popuščajočo enakost (`==`) za primerjavo `response.status` s `200`. Uporaba popuščajoče enakosti je lahko nevarna zaradi prisilne pretvorbe tipov (npr. `response.status` bi lahko bila niz `“200”` in bi vseeno prestala primerjanje). Stroga pravila Ultracitea verjetno zahtevajo uporabo `===` za primerjave.

### Po (samodejni popravek Ultracitea)

```tsx title="validate.ts"
let isValid = false;
const response = getResponse();
if (response.status === 200) { // [!code highlight]
  isValid = true;
}
```

Ultracite je samodejno zamenjal `== 200` z `=== 200`. Ta manjša sprememba prepreči subtilne napake. Popravek je bil uporabljen ob shranjevanju kot del dejanj `source.fixAll.biome`. Takšno pravilo (podobno ESLint-ovemu `eqeqeq`) zagotavlja, da razvijalci uporabljajo strogo preverjanje enakosti.

Poleg tega vas bo Ultracite opozoril, da `isValid` nikoli ni uporabljen, in predlagal njegovo odstranitev.

## Urejanje in čiščenje uvozov

### Pred (neurejeni uvozi)

```tsx title="index.tsx"
import Z from './z-module';
import A from './a-module';
import React from 'react';
import { helper } from './util';

const MyComponent = () => (
  <>
    <Z />
    <A />
  </>
);
```

Uvozi tukaj niso v abecednem vrstnem redu, poleg tega pa uvoz `helper` ni nikjer uporabljen v datoteki.

### Po (po shranitvi z Ultraciteom)

```tsx title="index.tsx"
import React from 'react'; // [!code highlight]
import A from './a-module'; // [!code highlight]
import Z from './z-module'; // [!code highlight]
import { helper } from './util'; // [!code --]

const MyComponent = () => (
  <>
    <Z />
    <A />
  </>
);
```

Ultracite (prek funkcije Biome za urejanje uvozov) je uvoze razporedil po abecedi glede na ime modula. Prav tako je samodejno odstranil neuporabljen uvoz `helper`. Razlika med pred in po se zgodi takoj ob shranitvi, kar zagotavlja, da je vaš razdelek z uvozi vedno urejen:

- Brez neuporabljenih uvozov, ki zasedajo vrh datoteke.
- Determinističen vrstni red uvozov (tako združitve in razlike ne bodo zmedene zaradi različnih vrstnih redov, ki jih dodajo različni razvijalci).

To vodi k bolj vzdržni kodi, zlasti v datotekah z mnogimi uvozi.

## Popravek dostopnosti

### Pred

```tsx title="Button.tsx"
<button onClick={submitForm}>
  Open modal
</button>
```

Privzeti tip gumba je `submit`, kar povzroči oddajo obrazca, kadar je gumb znotraj elementa form. To verjetno ni vedenje, ki ga želite v aplikaciji React. Ultracite vas bo na to opozoril in ponudil hiter popravek za spremembo tipa na `button`.

### Po (ročno ali s hitrim popravkom)

```tsx title="Button.tsx"
<button onClick={submitForm} type="button">
  Open modal
</button>
```

Tip je zdaj `button`, kar prepreči morebitno oddajo nadrejenega obrazca, ko uporabnik klikne gumb.

---

Ti primeri prikazujejo, kako Ultracite izboljša kakovost kode:

- Oblikovanje in doslednost stila brez truda.
- Samodejni popravki za mnoge pogoste težave (tako redko morate ročno popravljati drobne napake).
- Prepoznavanje resničnih problemov (tako jih lahko odpravite zgodaj v razvoju).

Z uporabo Ultracitea vaša koda ne ostane le čista, temveč tudi manj napak polna in bolj dostopna, zahvaljujoč kolektivnemu znanju, kodificiranemu v njegovih pravilih.